<template>
	<div>
		<div style="position:relative; z-index: 1000; width: 100%;">
			<div style="position: absolute; top:0; width: 100%;">
				<div class="nav">
					<el-row class="left">
						<div style="padding-left: 50px;font-size: 18px;">
							{{isName}}
							&nbsp;
						</div>
					</el-row>
					<el-row class="right">
						<span v-for="(item,index) in title" :key="index" @click="clickNav(index)">
							<i :class="item.fontClass"></i>
							{{item.text}}
						</span>
						<span v-if="isName" @click="$router.push(`/Category`)">
							<i class="iconfont icon-fenlei1"></i>
							分类
						</span>
						<span v-if="isName" @click="$router.push(`/myArticle/${uid}`)">
							<i class="iconfont  icon-wenzhang1"></i>
							我的文章
						</span>
						<span v-if="isName" @click="$router.push(`/WriteArticle/${uid}`)">
							<i class="iconfont  icon-tianxie"></i>
							写文章
						</span>

						<span v-if="isName" style="color: white;">
							<i class="el-icon-chat-dot-square"></i>
							<el-dropdown>
								<span class="el-dropdown-link">
									消息
									<el-badge v-show="$store.state.msgCountobj.allMsgCount!=0" class="mark"
										:value="$store.state.msgCountobj.allMsgCount" />
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>
										<router-link to="/msg/0">审核消息</router-link>
										<el-badge class="mark" v-show="$store.state.msgCountobj.toExamineMsgCount!=0"
											:value="$store.state.msgCountobj.toExamineMsgCount" />
									</el-dropdown-item>
									<el-dropdown-item>
										<router-link to="/msg/1">系统消息</router-link>
										<el-badge class="mark" v-show="$store.state.msgCountobj.sysMsgCount!=0"
											:value="$store.state.msgCountobj.sysMsgCount" />
									</el-dropdown-item>
									<el-dropdown-item>
										<router-link to="/msg/2">我的反馈</router-link>
										<!-- <el-badge class="mark" v-show="$store.state.msgCountobj.feedbackMsgCount!=0"
											:value="$store.state.msgCountobj.feedbackMsgCount" /> -->
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</span>


						<span v-if="isName" style="color: white;">
							<i class=" iconfont icon-lianjie"></i>
							<el-dropdown>
								<span class="el-dropdown-link">
									友情链接
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>
										<a href="https://gitee.com/" target="_Blank">gitee</a>
									</el-dropdown-item>
									<el-dropdown-item>
										<a href="https://github.com/" target="_Blank">github</a>
									</el-dropdown-item>
									<el-dropdown-item>
										<a href="http://www.baidu.com" target="_Blank">百度</a>
									</el-dropdown-item>
									<el-dropdown-item>
										<a href="https://bz.zzzmh.cn/index" target="_Blank">4k壁纸</a>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</span>
						<span v-if="isName" @click="logout">
							<i class="iconfont  icon-tuichu"></i>
							退出登录
						</span>
						<span v-if="!isName" @click="login()">
							<i class="iconfont  icon-denglu-copy"></i>
							登录
						</span>
						<span v-if="!isName" @click="$router.push('/Register')">
							<i class="iconfont  icon-zhuce"></i>
							申请账号
						</span>
					</el-row>

				</div>

				<div v-if="isShowAplayer">
					<aplayer :autoplay="autoplay" ref="aplayer"></aplayer>
				</div>

			</div>
		</div>
		<div class="dialog">
			<el-dialog title="搜索" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
				<el-input placeholder="请输入关键字:" v-model.trim="keyWord" style="width: 100%;margin: 0 auto;"
					:autofocus="true"></el-input>
				<el-divider></el-divider>
				<div class="searchConter">
					<div class="searchItem" v-for="(item,index) in searchList" :key="index">
						<div class="title" @click="gotoDateli(item)">
							{{item.title}}
						</div>
						<div class="summary" v-html="item.higSummary">
							<!-- 概述：{{item.summary}} -->
						</div>
					</div>
				</div>
			</el-dialog>
		</div>

	</div>
</template>

<script>
	// 音乐播放器
	import aplayer from '../../components/vue-aplayer/vue-aplayer.vue'
	export default {
		components: {
			aplayer
		},
		data() {
			return {
				keyWord: "",
				searchList: [],
				title: [{
					fontClass: 'iconfont icon-sousuo1',
					text: "搜索"
				},
				{
					fontClass: 'iconfont icon-shouye',
					text: "首页"
				},

				{
					fontClass: 'iconfont icon-guidang',
					text: "归档"
				},
				{
					fontClass: 'iconfont icon-liuyan1',
					text: "留言"
				},
				{
					fontClass: 'iconfont icon-yinle',
					text: "音乐"
				},
				{
					fontClass: 'iconfont icon-yingyong',
					text: "网站资源"
				},
				],
				autoplay: false, //控制播放器是否自动播放
				isShowAplayer: false,
				dialogVisible: false,
				UserName: "",
				msgCountsObj: {}
			};
		},
		created() {
			if (localStorage.getItem("TOKEN")) {
				this.title.splice(7, 2);
				this.isLogin = true
				this.getMessageCount()
			} else {
				this.isLogin = false
			}
		},
		computed: {
			isName() {
				// 用这个数据判断是否登录
				return this.$store.state.UserInfo.nickname
			},
			uid() {
				return this.$store.state.UserInfo.id
			},
			websocket() {
				return this.$store.state.webSocket.ws;
			},
		},
		watch: {
			'keyWord': {
				deep: true,
				handler(newVal, oldVal) {
					this.debounce(this.getUpList, 500);
				}
			},
			websocket(newVal) {
				if (newVal) {
					newVal.onmessage = (event) => {
						let res = JSON.parse(event.data)
						if (res.msg == "BeForMsgCount") {
							// 更新请求
							console.log("通过websocket触发了-----系统消息数更新请求");
							this.getMessageCount()
						}
						// 处理接收到的消息
						// console.log('Received message:', JSON.parse(JSON.stringify(event.data)));
					};
				}
			}
		},
		methods: {
			// 关闭弹出框
			handleClose() {
				console.log();
				this.keyWord = ""
				this.dialogVisible = false
			},
			gotoDateli(item) {
				this.dialogVisible = false
				this.$router.push({
					name: "articleDetail",
					params: {
						id: item.articleId
					}
				})
				this.keyWord = ""
			},
			debounce(fn, wait) {
				if (this.timer != null) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(fn, wait);
			},
			getUpList() {
				if (this.keyWord == "") {
					this.searchList = []
					return
				}
				// mysql like
				// this.$api.home.likeArticle(this.keyWord).then(res => {
				// 	if (res.code == 200) {
				// 		this.searchList = res.data
				// 	}
				// })

				// es like
				this.$api.home.likeArticleES(this.keyWord).then(res => {
					if (res.code == 200) {
						this.searchList = res.data
					}
				})
			},
			searchColor(kw, str) {
				// 添加正则
				const reg = new RegExp(kw, 'ig') // ig 是所有的意思 而非在发现第一个匹配项时立即停止
				// 使用replace方法替换元素产生高亮
				return str.replace(reg, function (match) {
					return `<span style="color:rgb(73, 177, 245)">${match}</span>`
				})
			},
			// 点击对应的nav
			clickNav(index) {
				switch (index) {
					case 0:
						this.dialogVisible = true
						break;
					case 1:
						this.$router.push({
							path: "/home"
						})
						//
						break;
						// case 2:
						// 	this.$router.push({
						// 		path: "/Category"
						// 	})
						break;
					case 2:
						this.$router.push({
							path: "/Pigeonhole"
						})
						break;
					case 3:
						this.$router.push({
							path: "/Barrage"
						})
						break;
					case 4:
						// 判断是否登录
						if (this.isName) {
							this.isShowAplayer = true
							this.autoplay = true
							// 调用子的方法
							this.$nextTick(() => {
								this.$refs.aplayer.getAudio()
							})
						} else {
							this.isShowAplayer = true
							this.autoplay = true
							// 调用子的方法
							this.$nextTick(() => {
								this.$refs.aplayer.getNoTokenList()
							})
							this.$notify({
								title: '播放成功！',
								message: '登录自定义自己喜欢的歌曲哦！',
								type: 'success',
								duration: 3000
							});
						}
						break;
					case 5:
						this.$router.push({
							path: "/resource"
						})
						break;
				}

			},
			async logout() {
				let _this = this
				let res = await this.$api.user.logOut()
				if (res.code == 200) {
					this.$store.commit("LOGOUT")
					// 断开连接
					this.$store.dispatch('clearWebSocket');
					// 清空背景颜色
					localStorage.removeItem("TOKEN")
					localStorage.clear()
					this.$store.dispatch("aiHide")
					this.$nextTick(() => {
						if (this.isShowAplayer == true) {
							this.$refs.aplayer.closeAudio()
							this.isShowAplayer = false
							this.autoplay = false
						}
					})

					this.$router.push({
						name: "Home"
					})
				}

			},
			login() {
				this.$nextTick(() => {
					if (this.isShowAplayer == true) {
						this.$refs.aplayer.closeAudio()
						this.isShowAplayer = false
						this.autoplay = false
					}
					this.$router.push('/Login')
				})
			},
			//获取消息数量
			getMessageCount() {
				// 交给vuex发请求
				this.$store.dispatch("getMsgCount")
			}
		}
	};
</script>

<style lang="less" scoped>
	.searchConter {
		width: 100%;
		height: 300px;
		overflow-y: scroll;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	.searchItem {
		height: 50px;
		width: 100%;
		box-shadow: 1px 2px 4px gainsboro;
		margin: 5px 0;
		padding: 5px;
		border-radius: 5px;

	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.nav-container {
		flex: 1;
	}

	.search-container {
		flex: 1;
	}

	.searchItem .title {
		font-weight: 700;
	}

	.searchItem:hover .title {
		color: rgb(73, 177, 245);
		cursor: pointer;
	}

	.summary {
		text-overflow: ellipsis;
		width: 100%;
		margin-top: 5px;
		white-space: nowrap;
		overflow: hidden;
	}

	.el-divider--horizontal {
		margin: 10px 0 !important;
	}

	.el-icon-chat-dot-square {
		font-size: 18px !important;
	}

	.nav {
		height: 50px;
		width: 100%;
		line-height: 50px;
		color: white;
		position: relative;
		background: hsla(0, 0%, 0%, .35) border-box;
		overflow: hidden;
		box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 30%) inset, 0 0.5em 1em rgb(0 0 0 / 60%);
		text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);

		.right {
			float: right;
			margin-right: 30px;

			span {
				margin: 0 10px;
			}
		}

		.left {
			float: left;
			margin-left: 10px;
		}
	}

	.col span {
		margin: 0 10px;
		font-size: 15px;
		font-weight: 300;
		cursor: pointer;
	}

	.nav::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		filter: blur(20px);
	}

	/deep/ .dialog .el-dialog__title {
		color: cornflowerblue;
	}

	/deep/ .dialog .el-input__inner {
		border-radius: 15px;
		border-color: cornflowerblue;
	}

	/deep/.el-input__inner:focus {
		transition: border linear .2s, box-shadow linear .5s;
		-moz-transition: border linear .2s, -moz-box-shadow linear .5s;
		-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
		outline: none;
		border-color: rgba(93, 149, 242, .75);
		box-shadow: 0 0 8px rgba(93, 149, 242, .105);
		-moz-box-shadow: 0 0 8px rgba(93, 149, 242, .5);
		-webkit-box-shadow: 0 0 8px rgba(93, 149, 242, 3);
	}

	.el-dropdown-link {
		cursor: pointer;
		color: white;

	}

	/deep/ #aplayer {
		z-index: 1000 !important;
		width: 290px !important;
	}

	/deep/ .aplayer-body {
		width: 290px;
	}
</style>